Bootstrap 4 下拉菜单

您所在的位置：网站首页 › drop down list怎么选 › Bootstrap 4 下拉菜单

Bootstrap 4 下拉菜单

2024-02-16 16:13| 来源: 网络整理| 查看: 265

下拉菜单

使用Bootstrap下拉插件用于显示切换你要展示的链接列表和更多内容的，或触发其它内容显示(覆盖）。

概览

弹出菜单是可触发的、上下文叠加显示链接列表和别的内容。它们可以与Bootstrap内置的弹出菜单JavaScript插件交互。通过点击触发，而不是通过鼠标悬停悬浮，这是一种设计思维。

下拉菜单控件依赖于第三方 Popper.js插件实现，Popper.js插件提供了动态定痊和viewport浏览器窗口大小监测，使用时请确保popper.min.js 文件放在Bootstrap JS之前，或者使用 bootstrap.bundle.min.js / bootstrap.bundle.js这两个文件，因为这两个文件中已经包含了Popper.js。

如果你要自行编译JS，记得包含 util.js。

无障碍浏览提示(易用性)

WAI ARIA标准定义了 role="menu" 插件, 但這是專門用於應用程式的功能表，它們觸發動作或功能。 ARIA菜单只能包含菜单列表、复选框、单选框、单选按钮组和子菜单。

Bootstrap的下拉菜单则是设计为通用的，适用于各种情形和标记结构，如可以创建包含其它输入和表单控制项（如搜索栏位或登录表单）的下拉菜单，因此，Bootstrap 不希望（也不能自動添加）与 ARIA菜单所需要的 role 和 aria- 属性，如果有必要请用户自行定义这类属性。

然而，BootStrap为大多数标准键盘功能操作加入了支持，如.dropdown-item 支持光标移动选择单个子项、并使用关闭菜单的 ESC 快捷键功能。

示例

将下拉列表的切换（按钮或链接）和下拉菜单包含在.dropdown中，或者另外声明position: relative;元素;可以从或触发下拉菜单，以适应你的使用的需求。

单一按钮的下拉菜单

任何一个 .btn块都可以定义变更为下拉菜单，下面是两个使用元素做下拉菜单的示例。

Action Another action Something else here Dropdown button Action Another action Something else here

使用标签的下拉菜单：

Dropdown link Action Another action Something else here Dropdown link Action Another action Something else here

还可以自由引用.btn-prima等颜色及样式类来定义下拉菜单的外在表现：

Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Action Another action Something else here Separated link 分裂式按钮下拉菜单

同样，可用与单个按钮下拉菜单近似的标记创建分裂式下拉菜单，注意添加了.dropdown-toggle-split -插入此符号为下拉选项作适当的间隔（距）处理。

我们使用这个额外的Class样式，将插入符号两边水平padding减少了25%，并移除了为默认下拉菜单添加的 margin-left 属性，这些额外的更改将插入符号集中在分裂式按钮中，并在主按钮旁边提供了适合的点击空间。

Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Toggle Dropdown Action Another action Something else here Separated link 尺寸大小定义

下拉菜单有各种大小规格可以选用，包括预设及分裂式按钮下拉菜单。

Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Large button ... Large button Toggle Dropdown ... Small button ... Small button Toggle Dropdown ... 方向方向向上

增加.dropup 样式，使下拉菜单向上展开。

Action Another action Something else here Separated link Action Another action Something else here Separated link Dropup Split dropup Toggle Dropdown 方向向右

通过将 .dropright添加到父元素来触发元素左侧的下拉菜单。

Action Another action Something else here Separated link Action Another action Something else here Separated link Dropright Split dropright Toggle Dropright 方向向左

通过将 .dropleft 添加到父元素来触发元素左侧的下拉菜单。

Action Another action Something else here Separated link Action Another action Something else here Separated link Dropleft Toggle Dropleft Split dropleft 菜单项

旧版Boostrap(v3)下拉菜单中的子菜单项必须是链接，但v4不再是这种情况，现在你可选择使用下拉列表中的元素，而不是仅仅标签。

Dropdown Action Another action Something else here

你可以创建非交互式下拉菜单项 .dropdown-item-text. 还可以随意使用定制的CSS或文本实用程序进一步设计样式.

Dropdown item text Action Another action Something else here Dropdown item text Action Another action Something else here 有效菜单

加上 .active 让下拉列表中的项样式为active.

Regular link Active link Another link Regular link Active link Another link 不可用菜单

加上.disabled 让下拉列表中的项样式为不可用.

Regular link Disabled link Another link Regular link Disabled link Another link 菜单对齐

默认情况下，一个下拉菜单自动从顶部和左侧的父级100％定位。添加.dropdown-menu-right 到.dropdown-menu右侧轻松对齐下拉菜单。

Heads up! Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).

Right-aligned menu Action Another action Something else here 响应式对齐

如果你想使用响应式对齐，请通过添加data-display="static"属性禁用动态定位，并使用响应式变体类。

为了下拉菜单右对齐和给定断点或更大的断点, 加上.dropdown-menu{-sm|-md|-lg|-xl}-right.

Left-aligned but right aligned when large screen Action Another action Something else here

为了下拉菜单左对齐和给定断点或更大的断点,加上.dropdown-menu-right 和 .dropdown-menu{-sm|-md|-lg|-xl}-left.

Right-aligned but left aligned when large screen Action Another action Something else here

注意，你不需要添加 data-display="static"属性设置为导航栏中的下拉按钮，因为导航条中不使用Popper.js.

菜单内容头部

添加标题来标记任何下拉菜单中的操作部分。

Dropdown header Action Another action Dropdown header Action Another action 菜单分隔与分割线

使用分隔符分割相关菜单子项，呈现出分组和分割线效果。

Action Another action Something else here Separated link Action Another action Something else here Separated link 文本

在文本下拉菜单中放置任何自由格式的文本并使用间隔工具。请注意，您可能需要额外的大小调整样式来限制菜单宽度。

一些示例文本在下拉菜单中自由流动。

这是更多示例文本。

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

菜单表单

将表单放在下拉菜单中，或将其放入下拉菜单中，并使用margin 或 padding 通用CSS样式调整空间和位置。

New around here? Sign up Forgot password? Email address Password Remember me Sign in New around here? Sign up Forgot password? Email address Password Remember me Sign in 下拉选项

使用data-offset或data-reference更改下拉菜单的位置。

Action Another action Something else here Action Another action Something else here Separated link Offset Action Another action Something else here Reference Toggle Dropdown Action Another action Something else here Separated link 用例

通过数据属性或JavaScript，下拉插件通过切换.show父列表项上的类来切换隐藏内容（下拉菜单）。该data-toggle="dropdown"属性依赖于在应用程序级别关闭下拉菜单，因此始终使用它是一个好主意。

在可触摸设备上，打开一个下拉菜单会将($.noop) mouseover事件传递给，这是移动浏览器针对触屏的特殊处理方法（可见 quirk in iOS’ event delegation），否则在下拉菜单之外的任何地方点击会无法触发关闭下拉菜单事件。一旦关闭下拉菜单，这些额外的事件会被立即移除。

通过事件属性

添加 data-toggle="dropdown" 在A链接或按钮上，以启用下拉菜单组件。

Dropdown trigger ... 通过JavaScript

通过JavaScript调用下菜菜单:

$('.dropdown-toggle').dropdown() data-toggle="dropdown" 需要保留

无论你是采用JavaScript 或者 data-api调用下拉菜单， data-toggle="dropdown" 总要保留在下拉列表的触发器元素中。

选项

可以通过数据属性或JavaScript传递选项。对于数据属性，选项名称追加到 data-，如： data-offset="".

名称 Type类型 Default默认值描述说明 offset number | string | function 0 下拉菜单相对于目标的偏移，参考Popper.js偏移文档。 flip boolean true 允许下拉菜单重叠到其相关元素上，参考 Popper.js触发文档。方法 Method Description $().dropdown('toggle') 给导航栏或分页启用下拉菜单功能。 $().dropdown('update') 更新下拉列表的位置。 $().dropdown('dispose') 销毁一个元素的下拉菜单。事件

All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element.

Event事件描述说明 show.bs.dropdown 当调用show显示方法时，此事件会立即触发。 shown.bs.dropdown 当下拉菜单对用户可见时，会触发此事件（将等待CSS转换完成）。 hide.bs.dropdown 当调用隐藏实例方法时，会立即触发此事件。 hidden.bs.dropdown 当下拉菜单从用户隐藏完毕时，会触发此事件（将等待CSS转换完成）。 $('#myDropdown').on('show.bs.dropdown', function () { // do something… })

【本文地址】

Bootstrap 4 下拉菜单

Bootstrap 4 下拉菜单

今日新闻

推荐新闻